<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import { onMounted,ref } from 'vue';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import {Autoplay, Pagination} from "swiper/modules";

const modules = [Autoplay, Pagination]
const swiperOptions = ref({
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    loop: true, // 循环切换
    speed: 500 // 切换速度
});

const years = ref([
    "2025",
    "2024",
    "2023",
]);
</script>

<template>
<div class="container">
  <swiper ref="swiperRef"
          :modules="modules"
          :autoplay="{ delay: 5000 }"
          :pagination="{ clickable: true }"
          :loop="true"
          :allowSlidePrev="true"
          :allow-slide-next="true"
          navigation
          class="swiper-style"
  >
    <swiper-slide v-for="(year, index) in years" :key="index">
      <div class="slide-content">
        <div>{{ year }}</div>
      </div>
    </swiper-slide>
  </swiper>
</div>
</template>

<style scoped  lang="scss">

.slide-content{
  height: 400px;
}
</style>